<template>
  <view class="my" v-if="isLogin">
    <!-- 头部-->
    <view class="header" @click="updateUserBg">
      <image :src="userInfo.userBg"></image>
    </view>

    <!-- 面板-->
    <view class="card">
      <view class="card-header">
        <view class="avatar" @click="securityCenter">
          <image :src="userInfo.userImg"></image>
        </view>
        <view class="info">
          <view class="name">
            {{userInfo.nickName||'游客'}}
          </view>
          <view class="desc">
            {{userInfo.desc||'这个家伙很懒，什么都没有留下!'}}
          </view>
        </view>
      </view>

      <view class="card-item" v-for="(card,index) in cards" :key="index" @click="gotoHandler(card)">
        <view class="title">
          {{card.title}}
        </view>
        <view class="right">
          <image src="../../static/svg/right.svg"></image>
        </view>
      </view>
    </view>

  </view>
  <NoLogin v-else></NoLogin>
</template>

<script>
  import {
    req
  } from '../utils/request/request'
  import {
    mapState,
    mapMutations,
    mapGetters
  } from "vuex"
  import {
    uniToast
  } from '../utils/uni/uni';
  import {
    toBase64
  } from '../utils/image/Base64';
  import NoLogin from '../../components/NoLogin/NoLogin.vue'
  export default {
    components: {
      NoLogin
    },
    data() {
      return {
        cards: [{
          title: "个人资料",
          url: "/pages/my/my/personal_data/personal_data"
        }, {
          title: "我的订单",
          url: "/pages/my/my/my_orders/my_orders"
        }, {
          title: "我的收藏",
          url: "/pages/my/my/my_collect/my_collect"
        }, {
          title: "地址管理",
          url: "/pages/my/my/my_address/my_address"
        }]
      }
    },
    onLoad() {},
    computed: {
      ...mapState("user", ["userInfo"]),
      ...mapGetters("user", ['isLogin'])
    },
    methods: {
      ...mapMutations('user', ['EDITUSERINFO']),
      /* 上传背景图*/
      updateUserBg() {
        /* 图片后缀名 base64格式*/
        toBase64(({
          imgType,
          serverBase64Img
        }) => {
          req('updateUserBg', {
            reqData: {
              imgType,
              serverBase64Img
            },
            isToken: true,
            method: 'POST'
          }).then(({
            data: res
          }) => {
            uniToast(res['msg'])
            this.EDITUSERINFO({
              userBg: res['userBg']
            })
          })
        })
      },
      /* 安全中心*/
      securityCenter() {
        uni.navigateTo({
          url: '/pages/my/my/security_center/security_center'
        })
      },
      gotoHandler({
        url
      }) {
        uni.navigateTo({
          url
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .my {
    height: 100%;

    .header {
      height: 360rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .card {
      padding: 0 20rpx;
      transform: translateY(-80rpx);


      .card-header {
        height: 230rpx;
        background-color: #ffffff8c;
        border-top-left-radius: 20rpx;
        border-top-right-radius: 20rpx;
        display: flex;
        padding: 20rpx;

        .info {
          margin-left: 40rpx;

          .desc {
            margin-top: 30rpx;
            font-size: 24rpx;
            color: #aaa;
          }

          .name {
            color: #0c34ba;
            font-size: 26rpx;
            font-weight: bold;
          }
        }

        .avatar {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          overflow: hidden;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }

      .card-item {
        color: #878787;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        padding: 0 20rpx;
        height: 100rpx;
        border-bottom: 1rpx solid #dddddd;

        &:last-child {
          border-bottom: 1rpx solid transparent;
        }

        .right {
          width: 30rpx;
          height: 30rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

  }
</style>
